<template>
  <div class="app-main">
    <my-header :title="title"></my-header>
    <my-goods 
    v-for="item in list" 
    :key="item.id"
    :goods="item"
    ></my-goods>
    <my-footer :list="list"></my-footer>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

export default {
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  data() {
    return {
      title: '购物车案例',
      list: []
    }
  },
  // Vue 实例 添加 data methods .. 属性后 发送Ajax
  created() {
    this.$http({
      // 默认 get 请求
      url: '/api/cart '
    }).then((res) => {
      // console.log(res.data.list);
      this.list = res.data.list
    })
  }

}
</script>

<style lang="less" scoped>
.app-main {
  padding: 45px 0 50px 0;
}

</style>